<template>
    <section class="content">
        <img src="../../../assets/images/post-top.png" alt="">
        <div class="choose">
            <p>帖子列表<span></span></p>
            <p>草稿箱</p>
        </div>
        <div class="table">
            <div class="status">
                <div class="item">发表帖子</div>
                <div class="item">已发布(<span>10</span>)</div>
                <div class="item">审核中(<span>0</span>)</div>
                <div class="item">未通过(<span>0</span>)</div>
            </div>
            <div class="search">
                <el-input></el-input>
            </div>
            <el-table
                    ref="multipleTable"
                    :data="tableData"
                    tooltip-effect="dark"
                    style="width: 100%"
                    @selection-change="handleSelectionChange">
                <el-table-column
                        type="selection"
                        width="55">
                </el-table-column>
                <el-table-column
                        label="标题"
                        width="120">
                    <template slot-scope="scope">{{ scope.row.date }}</template>
                </el-table-column>
                <el-table-column
                        prop="name"
                        label="版块"
                        width="120">
                </el-table-column>
                <el-table-column
                        prop="address"
                        label="发表时间"
                        show-overflow-tooltip>
                </el-table-column>
                <el-table-column
                        prop="address"
                        label="人气"
                        show-overflow-tooltip>
                </el-table-column>
                <el-table-column
                        prop="address"
                        label="回复"
                        show-overflow-tooltip>
                </el-table-column>
                <el-table-column
                        prop="address"
                        label="管理"
                        show-overflow-tooltip>
                </el-table-column>
            </el-table>
            <div class="footer">
                <p>当前选中: <span>0/20</span></p>
                <div class="del">
                    <span>删除</span>
                </div>
            </div>
        </div>
    </section>
</template>

<script>
    export default {
        name: 'index',
        data() {
            return {

                tableData: [{
                    date: '2016-05-03',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                }, {
                    date: '2016-05-02',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                }, {
                    date: '2016-05-04',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                }, {
                    date: '2016-05-01',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                }, {
                    date: '2016-05-08',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                }, {
                    date: '2016-05-06',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                }, {
                    date: '2016-05-07',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                }],
                multipleSelection: []

            }
        },
        methods: {
            handleSelectionChange() {
            }
        }
    }
</script>

<style scoped lang="scss">
.content{
    >img{
        height: 80px;
        width: 1040px;
    }
    .choose{
        margin: 18px 0;
        background: #fff;
        height: 50px;
        line-height: 50px;
        padding-left: 20px;
        p{
            font-size: 16px;
            font-weight: 500;
            float: left;
            width:82px;
            position: relative;
            span{
                height: 3px;
                width: 33px;
                background: #19b955;
                display: block;
                bottom: 0;
                left: 15px;
                position: absolute;
            }
            &:nth-child(1){
                color: #19b955;
            }
        }
    }
    .table{
        height: 75px;
        background: #fff;
        .status{
            .item{
                float: left;
                height: 40px;
                line-height: 40px;
                width: 96px;
                text-align: center;
            }
        }
    }
}
</style>
